<template>
  <div class="movie">
    <h1>我想看的电影名字必须是4-6的长度</h1>
    <ul>
      <li v-for="movie in myMovieList" :key="movie.tvId">
        {{ movie.albumName }}
      </li>
    </ul>
    <br />
    <h1>我想看的电影名字必须是我传递的长度</h1>
    <ul>
      <li v-for="movie in yourMovieList" :key="movie.tvId">
        {{ movie.albumName }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Movie",
  mounted() {
    // console.log(mapGetters(["myMovieList", "yourMovieList"]));
  },
  computed: {
    ...mapGetters("count", ["myMovieList"]),
    /* myMovieList() {
      return this.$store.getters.myMovieList;
    }, */

    //因为getter返回的如果是一个函数的话,我们可能需要传参,就不要使用mapGetters
    yourMovieList() {
      console.log(this);
      //当getters中的计算属性值是一个函数的时候，需要在使用的时候调用
      //但是这样的化就可以传递参数了
      // getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果
      return this.$store.getters["count/yourMovieList"]({ start: 2, end: 4 });
    },
  },
};
</script>

<style scoped>
.movie {
  background: pink;
  margin: 30px;
}
</style>